<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="s" uri="/struts-tags"  %>
<%
	String operation = request.getParameter("operation");
%>
<%@ page import="com.starbaba.core.web.constant.WebConstants"%>
<%@ page import="com.starbaba.system.user.model.UserVO"%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp"%>
<style>
.table>th {
	vertical-align: center;
	background-color: grey;
}
input[type="checkbox"] {
   font-size: 100px;
   vertical-align:middle;
   margin-top:-2px; 
   margin-left:2px;
   margin-bottom:1px;
}
.comment-d {
	border: 1px solid #b5b5b5;margin-bottom: 10px;padding-bottom: 10px;
}
</style>
</head>
<body class="no-skin">
	<div class="page-content">
		<div class="page-content-area">
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<form class="form-horizontal" id="product-form"
						name="product-form" method="post" enctype="multipart/form-data">
						<div class="widget-box widget-color-blue">
							<div>
								<h3>用户评价</h3>
							</div>
							<input type="hidden" name="activityId" id="activityId" value="${paramsMap.activityId}"/>
							<input type="hidden" name="commentCount" id="commentCount" value="${paramsMap.commCount}"/>
							<div style="padding:10px;" id="comment-model">
								<c:forEach items="${paramsMap.commList}" var="item" varStatus="status">
									<div class="comment-d" id="commentItem${status.index+1}">
										<div style="padding:10px;">
											<input type="hidden" id="commentId" name="commentId${status.index+1}" value="${item.id}"/>
											<div>
											   <label for="from">评价内容</label><br>
											   <input type="text" name="comment${status.index+1}" id="comment${status.index+1}"  class="col-xs-12 col-sm-12 comment-con" value="${item.comment}">
											</div>
											<div>
											   <label for="from">小编回复</label><br>
											   <input type="text" name="reply${status.index+1}" id="reply${status.index+1}" class="col-xs-12 col-sm-12" value="${item.reply}">
											</div>
											<div>
												<label for="from">评分</label><br>
												<input type="text" name="score${status.index+1}" id="score${status.index+1}" value="${item.score}" class="comment-score">
											</div>
											<div>
												<label for="from">评价时间</label><br>
												<input type="text" data-date-format="yyyy-mm-dd" value="${item.create_time}" name="commentTime${status.index+1}" id="commentTime${status.index+1}" class="date-picker">
											</div>
											<div>
												<label for="from">有用初始值</label><br>
												<input type="text" name="effective${status.index+1}" id="effective${status.index+1}" value="${item.effective}" class="comment-effective">
											</div>
										</div>
										<div>
											<button type="button" class="btn btn-primary btn-sm no-border" onclick="deleteComment(${status.index+1},${item.id});">删除</button>
											<button type="button" class="btn btn-primary btn-sm no-border" onclick="copyComment(${status.index+1});">复制</button> 
										</div>
									</div>
								</c:forEach>
								<div id="addCommBtn">
									<div class="col-md-offset-3 col-md-9">
										<button type="button" class="btn btn-primary btn-sm no-border" onclick="addComment();">添加</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="clearfix form-actions">
				<div class="col-md-offset-3 col-md-9">
					<button class="btn  btn-inverse  no-border " onclick="doCancle()"
						id="delete">
						<i class="ace-icon fa fa-undo bigger-160"></i> 取消
					</button>
					&nbsp; &nbsp; &nbsp;
					<button id="btn-save" name="btn-save"
						class="btn  btn-success  no-border" type="button"
						onclick="doSave()">
						<i class="ace-icon fa fa-floppy-o bigger-160"></i> 保存
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--模态框-->
	<div class="modal fade" id="Modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title"></h4>
				</div>
				<div class="modal-body clearfix">
					<form id="addImage" name="addImage" method="post"
						enctype="multipart/form-data">
						<div class="row">
							<div class="form-group col-xs-12">
								<div class="input-group col-sm-12">
									<input type="file" class="form-control" name="myFile"
										accept=".png,.jpg,.jpeg" />
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" disabled id="confirm">上传</button>
				</div>
			</div>
		</div>
	</div>

	<%@ include file="/common/common-js.jsp"%>
	<%@ include file="/discovery/maxlength.jsp"%>
	<script type="text/javascript" src="${ctx}/ace/js/maxlength.js"></script>
	<script type="text/javascript" src="${ctx}/js/wangEditor-1.3.11.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<script>
		var $multiple = 1;
		var $selector = '';
		var $input = '';

		$(function() {
			$('#img').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#thumbnail').attr('src', this.result);
					$('#img').attr("value", this.result);
				});
			});
			
			$('#market_img').change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				$(r).load(function() {
					$('#market_tag').attr('src', this.result);
					$('#market_img').attr("value", this.result);
				});
			});

			//点击按钮
			$('.get-img-modal').on('click', function() {
				//展示模态框
				var $this = $(this);
				var $title = $this.attr('data-title');
				$input = $this.attr('data-input');
				$selector = $this.attr('data-selector');
				$multiple = $this.attr('data-multiple');
				if ($multiple == 1) {
					$('input[name="myFile"]').prop('multiple', true);
				} else {
					$('input[name="myFile"]').prop('multiple', false);
				}
				$('#Modal').find('h4.modal-title').html($title);
				$('#Modal').modal('show');
				return false;
			});

			$('.thumbnail').on('click', function() {
				$('#thumbnail').attr('src', "");
				$("input[id=thumbnail]").val("");
			});

			//上传按钮
			$('#confirm').bind('click', function() {
				if ($('input[name="myFile"]').val() != '') {
					uploadImage('#addImage', $selector, $input, $multiple);
				}
				return false;
			});

			$('input[name="myFile"]').on('change', function() {
				if ($(this).val() != '') {
					$('#confirm').prop('disabled', false);
				} else {
					$('#confirm').prop('disabled', true);
				}
			});
		});
		
		//添加评论 
		function addComment(){
			var commentModel = $("#comment-model");
			var commentCount = $("#commentCount").val();
			commentCount++;
			var html = '<div class="comment-d" id="commentItem'+commentCount+'">'
					+		'<div style="padding:10px;">'
					+			'<div>'
					+				'<label for="from">评价内容</label><br>'
					+				'<input type="text" name="comment'+commentCount+'" id="comment'+commentCount+'"  class="col-xs-12 col-sm-12" value="">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">小编回复</label><br>'
					+				'<input type="text" name="reply'+commentCount+'" id="reply'+commentCount+'"  class="col-xs-12 col-sm-12" value="">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">评分</label><br>'
					+				'<input type="text" name="score'+commentCount+'" id="score'+commentCount+'" placeholder="">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">评价时间</label><br>'
					+				'<input type="text" data-date-format="yyyy-mm-dd" name="commentTime'+commentCount+'" id="commentTime'+commentCount+'" class="date-picker">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">有用初始值</label><br>'
					+				'<input type="text" name="effective'+commentCount+'" id="effective'+commentCount+'" placeholder="">'
					+			'</div>'
					+		'</div>'
					+		'<div>'
					+			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="deleteComment('+commentCount+');">删除</button>'
					+			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="copyComment('+commentCount+')">复制</button> '
					+		'</div>'
					+	'</div>';
			commentModel.append(html);
			var addCommBtn = $("#addCommBtn");
			commentModel.append(addCommBtn);
			$("#commentCount").val(commentCount);
		}
		
		//复制评论
		function copyComment(index){
			var commentModel = $("#comment-model");
			var commentCount = $("#commentCount").val();
			commentCount++;
			var comment = $("#comment"+index).val();
			var reply = $("#reply"+index).val();
			var score = $("#score"+index).val();
			var commentTime = $("#commentTime"+index).val();
			var effective = $("#effective"+index).val();
			var html = '<div class="comment-d" id="commentItem'+commentCount+'">'
					+		'<div style="padding:10px;">'
					+			'<div>'
					+				'<label for="from">评价内容</label><br>'
					+				'<input type="text" name="comment'+commentCount+'" id="comment'+commentCount+'"  class="col-xs-12 col-sm-12 comment-con" value="'+comment+'">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">小编回复</label><br>'
					+				'<input type="text" name="reply'+commentCount+'" id="reply'+commentCount+'"  class="col-xs-12 col-sm-12 reply-con" value="'+reply+'">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">评分</label><br>'
					+				'<input type="text" name="score'+commentCount+'" id="score'+commentCount+'" placeholder="" value="'+score+'" class="comment-score">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">评价时间</label><br>'
					+				'<input type="text" data-date-format="yyyy-mm-dd" name="commentTime'+commentCount+'" id="commentTime'+commentCount+'" value="'+commentTime+'" class="date-picker comment-time">'
					+			'</div>'
					+			'<div>'
					+				'<label for="from">有用初始值</label><br>'
					+				'<input type="text" name="effective'+commentCount+'" id="effective'+commentCount+'" value="'+effective+'" placeholder="">'
					+			'</div>'
					+		'</div>'
					+		'<div>'
					+			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="deleteComment('+commentCount+');">删除</button>'
					+			'<button type="button" class="btn btn-primary btn-sm no-border" onclick="copyComment('+commentCount+')">复制</button> '
					+		'</div>'
					+	'</div>';
			commentModel.append(html);
			var addCommBtn = $("#addCommBtn");
			commentModel.append(addCommBtn);
			$("#commentCount").val(commentCount);
		}
		
		//删除评论
		function deleteComment(index,commentId){
			var answer = window.confirm("是否确认删除?");
			if(answer){
				var commTab = $("#commentItem"+index);
				if(isBlock(commentId)){
					commTab.remove();
				}else{
					var data = {"commentId":commentId};
					$.ajax({
						type:"post",	
						async:true,
						data:data,
						url: "${ctx}/loanactivity/deleteComment.action",
						success:function(resp){
							commTab.remove();
						},
						error:function(error){
							alert("删除失败！");
						}
					});
				}
				
			}
		}

		$(document).ready(function() {
			if($("#dr").attr("checked")){
				$('#mint').text("最短贷款时间(天)");
		    	$('#maxt').text("最长贷款时间(天)");
			}else{
				$('#mint').text("最短贷款时间(月)");
		    	$('#maxt').text("最长贷款时间(月)");
			}
			//编辑
		    var cash_loan_type = "${paramsMap.model.cash_loan_type}".split(",");
		    for(var i=0; i < cash_loan_type.length;i++){
		    	if(cash_loan_type[i] == 1){
		    		$('input[name="cash_loan_chk_type"][value="1"]').attr("checked",true);
		    	}
		    	if(cash_loan_type[i] == 2){
		    		$('input[name="cash_loan_chk_type"][value="2"]').attr("checked",true);
		    	}
		    	if(cash_loan_type[i] == 3){
		    		$('input[name="cash_loan_chk_type"][value="3"]').attr("checked",true);
		    	}
		    }
		    
		    var identity_type = "${paramsMap.model.identity_type}".split(",");
		    for(var i=0; i < identity_type.length;i++){
		    	if(identity_type[i] == 1){
		    		$('input[name="identity_chk_type"][value="1"]').attr("checked",true);
		    	}
		    	if(identity_type[i] == 2){
		    		$('input[name="identity_chk_type"][value="2"]').attr("checked",true);
		    	}
		    	if(identity_type[i] == 3){
		    		$('input[name="identity_chk_type"][value="3"]').attr("checked",true);
		    	} 
		    }
		    
		    var credit_type = "${paramsMap.model.credit_type}".split(",");
		    for(var i=0; i < credit_type.length;i++){
		    	if(credit_type[i] == 1){
		    		$('input[name="credit_chk_type"][value="1"]').attr("checked",true);
		    	}
		    	if(credit_type[i] == 2){
		    		$('input[name="credit_chk_type"][value="2"]').attr("checked",true);
		    	}
		    	if(credit_type[i] == 3){
		    		$('input[name="credit_chk_type"][value="3"]').attr("checked",true);
		    	}
		    }
		});
		
		function uploadImage(form, selector, input, multiple) {
			var options = {
				url : "${ctx}/mall/fileupload/fileUpload.action",
				type : "POST",
				dataType : "json",
				beforeSend : function() {
					$(".load_bg,.load_img").show();
				},
				success : function(data) {
					console.log(data);
					var inputValue = '';
					var dataList = data.split('#');
					insertHtml(dataList, selector, multiple);
					if (multiple == 1) {
						//获取真实input的值
						inputValue = $(input).val();
					}
					
					if (inputValue == '' || inputValue == null) {
						$(input).val(data);
					} else {
						$(input).val(inputValue + '#' + data);
					}

					//隐藏模态框
					$('#Modal').modal('hide');
					//清空modal里面的input的值
					$('input[name="myFile"]').val('');
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				},
				complete : function() {
					$(".load_bg,.load_img").hide();
				}
			}
			$('form[name="addImage"]').ajaxSubmit(options);
		}

		function insertHtml(dataList, selector, multiple) {
			var html = '';
			var iconClass = '';
			if (multiple == 0) {
				iconClass = 'change-btntext'
			}
			$.each(dataList, function(index, item) {
				html += '<div class="img-box">' + '<img src="' + item + '"/>'
						+ '<i class="fa fa-times ' + iconClass + '"></i>'
						+ '</div>';
			});
			if (multiple == 1) {
				$(selector).children('.view').removeClass('no-border').append(
						html);
			} else {
				$(selector).children('.view').removeClass('no-border').html(
						html);
			}
		}

		function doCancle() {
			try {
				if (parent) {
					parent.parent['__extdialog_active'].dialog('close');
				}
			} catch (e) {
				window.history.back();
			}
		}

		function doSave() {
			var commentFlag = false;
			var comments = $(".comment-con");
			comments.each(function(index,element){
			    var comment = $(element).val();
			    if(isBlock(comment)){
			    	commentFlag = true;
			    	return;
			    }
			});
			if(commentFlag){
				parent.bootbox.alert("评论内容不能为空！");
				return;
			}
			var scores = $(".comment-score");
			scores.each(function(index,element){
			    var score = $(element).val();
			    if(isBlock(score)){
			    	commentFlag = true;
			    	return;
			    }
			});
			if(commentFlag){
				parent.bootbox.alert("评分不能为空！");
				return;
			}
			var effectives = $(".comment-effective");
			effectives.each(function(index,element){
			    var effective = $(element).val();
			    if(isBlock(effective)){
			    	commentFlag = true;
			    	return;
			    }
			});
			if(commentFlag){
				parent.bootbox.alert("有用初始值不能为空！");
				return;
			}
			
			$("#btn-save").attr("disabled", "disabled");
			saveForm();
		}
		
		function saveForm() {
			var saveUrl = ctx + "/loanactivity/saveComments.action";
			var options = {
				url : saveUrl,
				type : "POST",
				dataType : "json",
				beforeSend : function() {
					$(".load_bg,.load_img").show();
				},
				success : function(data) {
					parent.parent['__extdialog_active'].dialog('close');
					parent.query_any();
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
					console.log(XMLHttpRequest, textStatus, errorThrown);
				},
				complete : function() {
					$(".load_bg,.load_img").hide();
				}
			};
			$('form[name="product-form"]').ajaxSubmit(options);
		}

		//日期时间插件
		jQuery(function($) {
			// 注册日历组件
			jQuery(function($) {
				$(".date-picker").datetimepicker({
					autoclose : true,
					format : "yyyy-mm-dd hh:ii:ss"
				}).next().on(ace.click_event, function() {
					$(this).prev().focus();
				});

			});
		});
		
		function isBlock(value){
			if(value == ''|| value==null || value==undefined){
				return true;
			}
			return false;
		}
	</script>
</body>
</html>
